---
title: Globe
date: 2023-08-02
description: An autorotating, interactive, and highly performant globe made using WebGL.
author: dillionverma
published: true
video: https://cdn.magicui.design/globe.mp4
---

## ⚠️ Warning

> The globe has known performance issues causing computer GPU and CPU to spike.
> See [here](https://github.com/magicuidesign/magicui/issues/42) for more details.

<ComponentPreview name="globe-demo" />

<Steps>

### Installation

Copy and paste the following code into your project.

```bash
npm install -D cobe react-spring
```

```text
components/magicui/globe.tsx
```

<ComponentSource name="globe" />

</Steps>

## Props

### Globe

| Prop      | Type        | Description                                                                                    | Default |
| --------- | ----------- | ---------------------------------------------------------------------------------------------- | ------- |
| className | string      | The css classes for the component                                                              |         |
| config    | COBEOptions | The configuration options for the globe. More details [here](https://cobe.vercel.app/docs/api) | `{}`    |

## Credits

This component is built on top of [Cobe](https://cobe.vercel.app/docs/api).
